@mixin padding($gutter) {

    .#{$prefix}-padding--horizontal {
        padding-left: #{$gutter / 2};
        padding-right: #{$gutter / 2};
    }

    &.\--padding-horizontal {
        > * {
            padding-left: #{$gutter / 2};
            padding-right: #{$gutter / 2};
        }
    }

}

@mixin grid($columns, $rows, $height, $gutter) {
    grid-template-columns: repeat($columns, 1fr);
    grid-template-rows: repeat($rows, $height * 1rem);
    @include padding($gutter)
}

@mixin baseline-image($object-height) {

    $line-height: double($font-size, $row-height);

    $offset: ($line-height - $cap-height * $font-size) / 2;

    margin-top: ($offset - $row-height) + rem;
    margin-bottom: -($offset - $row-height) + rem;

}

@mixin baseline($font-size, $cap-height: $cap-height, $skip: 0, $for: $first-breakpoint-name, $skip-lines: 0, $auto-lines: true) {

    $font-size: clear-units($font-size);

    @include loop-breakpoints() {

        /**
         * Keep track of how many times the font has to double its rows in order to fit nicely on the screen
         */
        $counter: double($font-size, $gridel-row-height, $gridel-row-height, if($auto-lines == true, 1, $skip-lines + 1));
        $lines: if($auto-lines == true, 1, $skip-lines);
        $line-height: $gridel-row-height * $counter;
        $offset: ($line-height - $cap-height * $font-size) / 2;

        $is-nested: false;

        @if variable-exists(gridel-grid-parent-selector) {

            @if is-nested-selector(map-get($gridel-grid-parent-selector, element), first(&)) {
                $offset: $offset + map-get($gridel-grid-parent-selector, offset);
            }

            $is-nested: true;

        }

        @include font-spacing($font-size, $line-height, $gridel-row-height, $offset, $skip, $lines, $is-nested);

        $gridel-grid-parent-selector: (
                element: first(&),
                offset: ($offset - $gridel-row-height) * -1,
                skipOffset: $offset
        ) !global;

        @content;

    }

}

@mixin font-spacing($font-size, $line-height, $row-height, $offset, $skip, $skip-lines, $is-nested: false) {

    font-size: #{$font-size}rem;
    line-height: #{$line-height}rem;
    display: block;

    @if $font-size > $row-height or $is-nested == true {
        margin-top: $offset - ($row-height * $skip-lines) + rem;
        margin-bottom: -($offset - $row-height) + rem;
        padding-top: $row-height * $skip + rem;
    } @else {
        padding-top: $offset + rem;
        margin-bottom: -$offset + ($row-height * $skip-lines) + rem;
        margin-top: $row-height * $skip - ($row-height * $skip-lines) + rem;
    }

}

@mixin grid-rows($count) {
    @include loop-breakpoints() {
        grid-template-rows: repeat($count, $gridel-row-height + rem);
    }
}

@mixin loop-breakpoints() {
    @each $current in $breakpoints {

        $gridel-is-first: first($breakpoints) == $current !global;
        $gridel-is-last: last($breakpoints) == $current !global;
        $gridel-gutter: map-get($current, gutter) !global;
        $gridel-margin: map-get($current, margin) !global;
        $gridel-breakpoint: map-get($current, breakpoint) !global;
        $gridel-row-height: map-get($current, row-height) !global;

        @if $gridel-is-first {
            @content
        } @else {
            @include breakpoint(#{$gridel-breakpoint}rem) {
                @content
            }
        }

    }
}
